<!-- 特惠商城 -->
<template>
	<view class="seller">
		<!-- 导航栏 -->
		<v-tabs name="cate_name" gutter="19" color="#eee" count="cate_count" :list="list" active-color="#000"
			:is-scroll="true" :current="current" @change="changeTabs"></v-tabs>
		<!-- 下拉菜单 -->
		<dropdownMenu @selectOption="selectOption"></dropdownMenu>
		<!-- 商品列表 -->
		<view class="seller_box">
			<notice-list :notice="stores" :current="current" @jumpDetail="jumpDetail"></notice-list>
		</view>
		<!-- 触底加载 -->
		<view class="getMore" style="padding-bottom: 50rpx;" v-if="stores.length > 5">
			<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
		</view>
		<empty :null_data="null_data" v-if="!stores.length"></empty>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import dropdownMenu from './components/dropdown-menu.vue'
	export default {
		components: {
			dropdownMenu
		},
		data() {
			return {
				//空状态
				null_data: {
					null_img: this.imgUrl + 'nocouponss.png',
					text: '暂无商家~'
				},
				isName: false,  // 下拉刷新
				isLoad: false,  // 下拉刷新
				isNone: false,  // 下拉刷新
				select: '全部', // 默认
				current: 0,    // 下标
				active: 0,     // 下标
				index: 0,      // 下标
				list_name: "", //选择的第一个分类的名称
				stores: [],    // 商家
				obj: {         // 提交请求api参数
					page: 1,
					pagesize: 10,
					category_id: '',
					orderby_type: "",
					orderby: '',
					lat: 24.881627,
					lng: 118.628881,
					member_id: 1
				}
			}
		},
		computed: {
			...mapState({
				list: state => state.sellers.category, // 左边导航栏标签
				Location: state => state.user.Location, // 经纬度
			})
		},
		onLoad() {
			this.obj.lat = Number(this.Location.latitude)
			this.obj.lng = Number(this.Location.longitude)
			this.getApi();
		},
		onReachBottom() {
			this.getMore();
		},
		mounted() {},
		methods: {
			// 加载更多
			getMore() {
				if (this.isName) return;
				this.isNone = true;
				this.isLoad = true;
				setTimeout(() => {
					this.obj.page++
					this.$api('shoppage', this.obj).then(res => {
						let arr = [...this.stores, ...res.data.data]
						this.stores = arr
						if (!res.data.data.length) {
							this.isLoad = false;
							this.isName = true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				}, 1000)
			},
			getApi() {
				this.$api('shoppage', this.obj).then(res => {
					let arr = res.data;
					this.stores = arr.data;
				})
			},
			// 跳转详情页
			jumpDetail(item, index) {},
			//选择二级菜单
			selectOption(active, index) {
				this.active = active
				this.index = index
				if (this.active == 0) {
					this.obj.orderby = 'desc'
					if (this.index == 1) {
						this.obj.orderby_type = 'praise'
						this.getApi();
					}
					if (this.index == 2) {
						this.obj.orderby_type = 'number'
						this.getApi();
					}
					if (this.index == 3) {
						this.obj.orderby_type = 'distance'
						this.getApi();
					}
				}
				// 好评排序
				if (this.active == 1) {
					if (this.index == 0) {
						this.obj.orderby_type = 'praise'
						this.obj.orderby = 'asc'
						this.getApi();
					}
					if (this.index == 1) {
						this.obj.orderby_type = 'praise'
						this.obj.orderby = 'desc'
						this.getApi();
					}
				}
				// 兑换量排序
				if (this.active == 2) {
					if (this.index == 0) {
						this.obj.orderby_type = 'number'
						this.obj.orderby = 'asc'
						this.getApi();
					}
					if (this.index == 1) {
						this.obj.orderby_type = 'number'
						this.obj.orderby = 'desc'
						this.getApi();
					}
				}
				// 距离排序
				if (this.active == 3) {
					if (this.index == 0) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'asc'
						this.getApi();
					}
					if (this.index == 1) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'desc'
						this.getApi();
					}
				}
			},
			// 打开二级菜单
			open(index) {
				this.$refs.uDropdown.highlight();
			},
			// 关闭二级菜单
			close(index) {
				this.$refs.uDropdown.highlight(index);
			},
			// 获取第一个分类的名称，以及下标
			changeTabs(index) {
				this.current = index;
				this.obj.category_id = this.list[index].id
				this.getApi();
				this.list_name = this.list[index].cate_name;
				this.select = this.list_name
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
